import { memo, FC, useCallback } from "react"
import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import { useModalSlideUp } from "@/features/useModal"
import { useIsomorphicLayoutEffect } from "ahooks"
import Rules from "./Rules"
import RealTime from "./RealTime"
import BonusHistory from "./BonusHistory"

export type ActionType = "rules" | "history" | "time" | ""

type IProps = {
    action: ActionType
    clearAction: () => void
}

const SlotBettingRankingsPopup: FC<IProps> = ({ action, clearAction }) => {
    const { open, close: closeModal } = useModalSlideUp("search-action")
    const handelClose = useCallback(() => {
        clearAction()
        closeModal()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    useIsomorphicLayoutEffect(() => {
        switch (action) {
            case "rules":
                open(<Rules close={handelClose} />, {
                    closeOnClickMask: true,
                    closeOnEscape: false,
                    onClose: clearAction,
                    position: "bottom",
                    animation: "slide-up",
                })
                break
            case "history":
                open(<BonusHistory close={handelClose} />, {
                    closeOnClickMask: true,
                    closeOnEscape: false,
                    onClose: clearAction,
                    position: "bottom",
                    animation: "slide-up",
                })
                break
            case "time":
                open(<RealTime close={handelClose} />, {
                    closeOnClickMask: true,
                    closeOnEscape: false,
                    onClose: clearAction,
                    position: "bottom",
                    animation: "slide-up",
                })
                break
            default:
                break
        }
    }, [open, action])

    return <ModalSlideUp familyName="account-page" />
}

export default memo(SlotBettingRankingsPopup)
